<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      @keyframes ColorChange {
        0% {
          outline: 1px solid lightgreen;
        }

        50% {
          outline: 1px solid green;
        }

        1000% {
          outline: 1px solid lightgreen;
        }
      }

      svg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        outline: 1px solid red;
        animation: ColorChange 500ms ease infinite;
      }

      line,
      polyline,
      rect {
        stroke-linecap: round;
        stroke-linejoin: round;
      }
    </style>
  </head>

  <body>
    <svg width="600"
         height="600"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         preserveAspectRatio="xMinYMin meet"
         stroke-linecap="round"
         stroke-linejoin="round"
         viewBox="0 0 600 600">

      <!-- 线性渐变 -->
      <defs>
        <linearGradient id="hues">
          <stop offset="0%"
                style="stop-color: #ffcc00;" />
          <stop offset="33.33%"
                style="stop-color: red;" />
          <stop offset="66.66%"
                style="stop-color: blue;stop-opacity: 0.2;" />
          <stop offset="77.77%"
                style="stop-color: pink;" />
          <stop offset="100%"
                style="stop-color: #0099cc;" />
        </linearGradient>
        <linearGradient id="right_to_left"
                        xlink:href="#hues"
                        x1="100%"
                        y1="0%"
                        x2="0%"
                        y2="0%" />
        <linearGradient id="top_to_down"
                        xlink:href="#hues"
                        x1="0%"
                        y1="0%"
                        x2="0%"
                        y2="100%" />
        <linearGradient id="p2p"
                        xlink:href="#hues"
                        x1="10%"
                        y1="10%"
                        x2="90%"
                        y2="90%" />
        <!--
          spreadMethod:
          • pad
            起始和结束渐变点会扩展到对象的边缘。
          • repeat
            渐变会重复起点到终点的过程，直到填充满整个对象。
          • reflect
            渐变会按终点到起点、起点到终点的排列重复，直到填充满整个对象。
         -->
        <linearGradient id="spreadMethod"
                        xlink:href="#hues"
                        x1="10%"
                        y1="10%"
                        x2="90%"
                        y2="190%"
                        spreadMethod="pad" />
        <linearGradient id="spreadMethod2"
                        xlink:href="#hues"
                        x1="30%"
                        y1="30%"
                        x2="70%"
                        y2="70%"
                        spreadMethod="repeat" />
        <linearGradient id="spreadMethod3"
                        xlink:href="#hues"
                        x1="10%"
                        y1="10%"
                        x2="90%"
                        y2="190%"
                        spreadMethod="reflect" />

      </defs>

      <rect x="0"
            y="0"
            width="200"
            height="200"
            style="fill: url(#spreadMethod2);stroke:black" />


      <!-- 径向渐变 -->
      <defs>
        <!--
          cx/cy：渐变中心横纵坐标，默认50%
          r：渐变半径，默认50%
          fx/fy：焦点坐标
         -->
        <radialGradient id="three_stops"
                        cx="30%"
                        cy="30%"
                        r="50%"
                        fx="60%"
                        fy="60%">
          <stop offset="0%"
                style="stop-color: #f96;" />
          <stop offset="50%"
                style="stop-color: #9c9;" />
          <stop offset="100%"
                style="stop-color: #906;" />
        </radialGradient>
        <radialGradient id="padded"
                        xlink:href="#three_stops"
                        spreadMethod="pad" />
        <radialGradient id="repeated"
                        xlink:href="#three_stops"
                        spreadMethod="repeat" />
        <radialGradient id="reflected"
                        xlink:href="#three_stops"
                        spreadMethod="reflect" />
      </defs>

      <rect x="200"
            y="0"
            width="200"
            height="200"
            style="fill: url(#reflected); stroke: black;" />






    </svg>

    <script>
      const ele = document.querySelector("#xxx");
      let n = 0;
      function Renderer() {
        n++;
        if (n >= 360) n = 0;
        window.requestAnimationFrame(Renderer);
      }
      // Renderer();
    </script>
  </body>

</html>
